{include file="public/toper"/}
<style>
    .layui-unselect{width: 190px;}
    .layui-form-select dl {width:190px;}
</style>
<div class="x-body">
    <form action="" method="post" class="layui-form" id="forms">
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>图片
            </label>
            <div class="layui-input-inline layui-upload" id="upload-thumb">
                <button type="button" class="layui-btn layui-btn-primary" id="image"><i class="layui-icon"></i>上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-list imgsc" id="demo" width="100" height="100">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>位置</label>
            <div class="layui-input-block">
                <select name="position">
                    <option value="1">首页轮播图</option>
                    <option value="2">首页中间banner</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>类型</label>
            <div class="layui-input-block">
                <select name="type" lay-filter="se">
                    <option value="-1">请选择</option>
                    <option value="0">商品</option>
                    <option value="1">地址</option>
                    <option value="2">不跳转，只展示</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" id="g" style="display: none">
            <label class="layui-form-label"><span class="x-red">*</span>选择商品</label>
            <div class="layui-input-block">
                <select name="usr">
                    {volist name="goods" id="vo"}
                    <option value="{$vo.goods_id}">{$vo.name}</option>
                    {/volist}
                </select>
            </div>
        </div>

        <div class="layui-form-item" id="di" style="display: none">
            <label for="url" class="layui-form-label">
                <span class="x-red">*</span>地址
            </label>
            <div class="layui-input-inline">
                <input type="text" value="" id="url" name="url" required="" class="layui-input">
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <button  class="layui-btn" lay-filter="formSubmit" lay-submit="">提交</button>
        </div>
    </form>
</div>

<script>
    layui.use(['form','layer','upload'], function(){
        $ = layui.jquery;
        var form = layui.form
            ,layer = layui.layer,
            upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#image',
            url: "{:url('Upload/uploadImage')}",
            ext: 'jpg|png|gif',
            drag:false,
            before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo').attr('src', result); //图片链接（base64）
                });
            },
            done: function(res){
                //如果上传失败
                if(res.code == 200 ){
                    $('#upload-thumb').append('<input type="hidden" name="img" value="'+ res.data.src+'">');
                }else {
                    layer.msg(res.msg);
                }
                //上传成功
            },
            error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        form.on('select(se)', function(data){
            if(data.value==1){
                $("#di").show()
                $("#g").hide();
            }else if(data.value==0) {
                $("#di").hide();
                $("#g").show();
            }else if(data.value==2){
                $("#di").hide();
                $("#g").hide();
            }else {
                $("#di").hide();
                $("#g").hide();
            }
        });
    });
</script>
{include file="public/footer"/}